<template>
	<view class="container">
		<view class="other_box" v-if="userInfo.id != personIncomeInfo.userId">
			<image class="other_accounts_img" :src="personIncomeInfo?.petSitterTeamUserVO?.user?.avatar"></image>
			<view class="user_info">
				<view class="other_name">
					<template v-if="personIncomeInfo?.petSitterTeamUserVO?.user?.realName">{{ personIncomeInfo?.petSitterTeamUserVO?.user?.realName }} |</template>
					{{ personIncomeInfo?.petSitterTeamUserVO?.user?.nickName }}
				</view>
				<view class="xjs-size-24 account_num">手机号：{{ personIncomeInfo?.petSitterTeamUserVO?.user?.phone }}</view>
			</view>
		</view>
		<view class="studio_change">
			<view class="xjs-size-32 xjs-weight-bold" @click="openStudioPopup" v-if="userStudioInfo.list.length > 1 && userInfo.id == personIncomeInfo.userId">
				{{ getStudioName(userStudioInfo.studioId) }}
				<uni-icons :type="downUp" size="16"></uni-icons>
			</view>
			<view v-else></view>
			<view class="" @tap="toDetail()">
				<text class="withdrawal_text">查看收益明细</text>
				<uni-icons type="right" color="#FF6084" size="13"></uni-icons>
			</view>
		</view>
		<view class="all_income_box">
			<view class="all_income_block m_b_24" @click="toDetail()">
				<view class="all_income_text">{{ personIncomeInfo?.petSitterTeamUserVO?.user?.nickName }}待结算总收益金额(元)</view>
				<view class="all_income_money">{{ personIncomeInfo?.pendingSettlem?.totalAmount }}</view>
				<view class="income_detail_box">
					<view class="income_item">
						<view class="income_money">¥{{ personIncomeInfo?.pendingSettlem?.mallAmount }}</view>
						<view class="income_name">商城推广</view>
					</view>
					<view class="income_item">
						<view class="income_money">¥{{ personIncomeInfo?.pendingSettlem?.refereeServiceAmount }}</view>
						<view class="income_name">陪宠推广</view>
					</view>
					<view class="income_item">
						<view class="income_money">¥{{ personIncomeInfo?.pendingSettlem?.serviceAmount }}</view>
						<view class="income_name">陪宠服务</view>
					</view>
				</view>
			</view>
			<view class="all_income_block" @click="toDetail()">
				<view class="all_income_text">{{ personIncomeInfo?.petSitterTeamUserVO?.user?.nickName }}已结算总收益金额(元)</view>
				<view class="all_income_money">{{ personIncomeInfo?.settle?.totalAmount }}</view>
				<view class="income_detail_box">
					<view class="income_item">
						<view class="income_money">¥{{ personIncomeInfo?.settle?.mallAmount }}</view>
						<view class="income_name">商城推广</view>
					</view>
					<view class="income_item">
						<view class="income_money">¥{{ personIncomeInfo?.settle?.refereeServiceAmount }}</view>
						<view class="income_name">陪宠推广</view>
					</view>
					<view class="income_item">
						<view class="income_money">¥{{ personIncomeInfo?.settle?.serviceAmount }}</view>
						<view class="income_name">陪宠服务</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="bottom" :is-mask-click="false" border-radius="24rpx" background-color="#fff">
			<view class="apply_pet">
				<view class="apply_pet_list">
					<view :class="userStudioInfo.studioId == item.studioId ? 'apply_pet_act' : ''" v-for="(item, index) in userStudioInfo.list" :key="index" @tap="studioBtn(item)">
						{{ item.studioName }}
					</view>
				</view>
				<view @tap="closeStudioPopup" class="xjs-btn-primary">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import api from "@/api/index";
import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { useUserStoreToRefs } from "@/store/useUserStore";

let { identity, studio, studioBalance } = useStudioStoreToRefs();
let { userInfo } = useUserStoreToRefs();

const userStudioInfo = reactive({ list: [], studioId: "" });
const popupRef = ref();
const downUp = ref("down");

let personIncomeInfo = reactive<any>({
	studioType: 1,
	userId: "",
	pendingSettlem: {},
	settle: {},
	petSitterTeamUserVO: {}
});
const getData = async () => {
	uni.showLoading({
		title: "加载中"
	});
	try {
		const {
			data: {
				map: { pendingSettlem = {}, settle = {} },
				petSitterTeamUserVO
			}
		} = await api({
			method: "get",
			url: `/mall/studio/balanceRecord/getUserIncome/${userStudioInfo.studioId}/${personIncomeInfo.userId}`
		});
		personIncomeInfo.pendingSettlem = pendingSettlem;
		personIncomeInfo.settle = settle;
		personIncomeInfo.petSitterTeamUserVO = petSitterTeamUserVO;
	} catch (error) {
		uni.hideLoading();
	} finally {
		uni.hideLoading();
	}
};

const getUserAllStudios = async () => {
	const { data } = await api({
		method: "get",
		url: `/mall/studio/balance/getUserStudioBalanceList/${personIncomeInfo.userId}`
	});
	userStudioInfo.list = data;
};

const studioBtn = (item) => {
	userStudioInfo.studioId = item.studioId;
	getData();
	downUp.value = "down";
	popupRef.value.close();
};
const openStudioPopup = () => {
	downUp.value = "up";
	popupRef.value.open();
};
const closeStudioPopup = () => {
	downUp.value = "down";
	popupRef.value.close();
};
const toDetail = () => {
	uni.navigateTo({
		url: `/pages/income/personRevenueOrders/index?studioId=${userStudioInfo.studioId}&userId=${personIncomeInfo.userId}`
	});
};
const getStudioName = (studioId) => {
	const item = userStudioInfo.list.find((item) => item.studioId == studioId);
	return item.studioName;
};
onPullDownRefresh(async () => {
	await getData();
	await getUserAllStudios();
	uni.stopPullDownRefresh();
});
onLoad((options) => {
	personIncomeInfo.userId = options.userId;
	userStudioInfo.studioId = options.studioId;
});
onShow(async () => {
	await getData();
	await getUserAllStudios();
});
</script>

<style lang="scss" scoped>
.other_box {
	background-color: #ffffff;
	border-radius: 24rpx;
	width: 100%;
	padding: 32rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;

	.other_accounts_img {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.user_info {
		margin-left: 16rpx;

		.other_name {
			font-size: 30rpx;
		}

		.account_num {
			margin-top: 16rpx;
		}
	}
}

.studio_change {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.apply_pet {
	padding: 0 32rpx;
	box-sizing: border-box;
	line-height: 1;

	.apply_pet_title {
		padding-top: 48rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		color: #1a1a1a;
		font-weight: bold;
		text-align: center;

		text {
			margin-right: 100rpx;
		}
	}

	.apply_pet_list {
		padding-bottom: 48rpx;
		box-sizing: border-box;

		view {
			margin-top: 40rpx;
			width: 686rpx;
			height: 92rpx;
			line-height: 92rpx;
			box-sizing: border-box;
			background-color: #f5f6f7;
			text-align: center;
			font-size: 30rpx;
			color: #5c5e5e;
			border-radius: 400rpx;
		}

		.apply_pet_act {
			border: 2rpx solid #ff6084;
			background-color: #fff;
			color: #ff6084;
		}
	}
}

.lf {
	display: flex;
}

.lf-between {
	justify-content: space-between;
}

.lf-center {
	align-items: center;
}

.lf-around {
	justify-content: space-around;
}

.container {
	padding: 32rpx;
	padding-bottom: var(--safe-area-bottom);
	box-sizing: border-box;
}

.expenditures {
	color: #6363ff !important;
}

.withdrawal_text {
	color: #ff6084;
	font-size: 26rpx;
}

.all_income_box {
	box-sizing: border-box;
	margin-top: 32rpx;

	.all_income_block {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 48rpx 32rpx;
		box-sizing: border-box;

		.all_income_text {
			font-weight: bold;
			font-size: 26rpx;
			color: #5c5e5e;
		}

		.all_income_money {
			font-weight: bold;
			font-size: 64rpx;
			color: #1b2120;
			margin-top: 16rpx;
		}

		.income_detail_box {
			margin-top: 64rpx;
			display: flex;
			flex-direction: row;

			.income_item {
				flex: 1;
				display: flex;
				flex-direction: column;

				.income_money {
					font-weight: bold;
					font-size: 30rpx;
					color: #5c5e5e;
				}

				.income_name {
					font-weight: 400;
					font-size: 26rpx;
					color: #7c807f;
					margin-top: 16rpx;
				}
			}
		}
	}
}

.m_b_24 {
	margin-bottom: 24rpx;
}
</style>
